<script setup lang="ts">
import {ref} from "vue";
import {useRouter} from "vue-router";
import {useUserStore} from "@/store/user";

const router = useRouter();

const user = useUserStore();

</script>

<template>
  <van-nav-bar :title="$route.name">
    <template #right>
      <van-icon name="setting-o" size="18" color="blue"/>
    </template>
  </van-nav-bar>

  <div class="user-top">
    <div class="user-profile-top">
      <van-image
          round
          width="5.5rem"
          height="5.5rem"
          :src="user.avatar"
          style="margin-top: 15px; margin-left: 15px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);"
      />
      <div class="user-profile">
        <h3>{{ user.username }}</h3>
        <van-space wrap v-for="tag in user.tags">
          <van-tag color="#ffe1e1" text-color="#ad0000" style="margin-right: 4px" >
            {{ tag }}
          </van-tag>
        </van-space>
      </div>
    </div>

    <div class="user-profile-bottom">
      <div class="user-profile-bottom-container">
        <span class="data">{{ user.postCount }}</span>
        <span class="data-text">博客</span>
      </div>
      <div class="user-profile-bottom-container">
        <span class="data">{{ user.likeCount }}</span>
        <span class="data-text">点赞</span>
      </div>
      <div class="user-profile-bottom-container">
        <span class="data">{{ user.collectCount }}</span>
        <span class="data-text">收藏</span>
      </div>
      <div class="user-profile-bottom-container">
        <span class="data">{{ user.fanCount }}</span>
        <span class="data-text">粉丝</span>
      </div>
    </div>
  </div>

  <div class="user-middle">
    <div class="image-container">
      <img class="icon" src="@/assets/images/like.png" @click="toMyLikeBlogPage"/>
      <span class="data-text2">点赞</span>
    </div>
    <div class="image-container">
      <img class="icon" src="@/assets/images/star.png" @click="toMyStarBlogPage"/>
      <span class="data-text2">收藏</span>
    </div>
    <div class="image-container">
      <img class="icon" src="@/assets/images/follow.png" @click="toFollow(1)"/>
      <span class="data-text2">关注</span>
    </div>
    <div class="image-container">
      <img class="icon" src="@/assets/images/fan.png" @click="toFollow(0)"/>
      <span class="data-text2">粉丝</span>
    </div>
  </div>

  <div class="user-bottom">
    <div style="display: flex; justify-content: space-around; padding-top: 30px">
      <div class="image-container">
        <img class="icon" src="@/assets/images/blog.png" @click="toBlogPage"/>
        <span class="data-text2">博客</span>
      </div>
      <div class="image-container">
        <img class="icon" src="@/assets/images/record.png" @click="toViewedBlogPage"/>
        <span class="data-text2">阅读记录</span>
      </div>
      <div class="image-container">
        <img class="icon" src="@/assets/images/teamjoined.png" @click="toMyTeamJoinPage"/>
        <span class="data-text2">已加队伍</span>
      </div>
      <div class="image-container">
        <img class="icon" src="@/assets/images/teamcreated.png" @click="toMyTeamCreatePage"/>
        <span class="data-text2">已建队伍</span>
      </div>
    </div>

    <div style="display: flex; justify-content: space-around; padding-top: 30px">
      <div class="image-container">
        <img class="icon" src="@/assets/images/signin.png" @click="toSignInPage"/>
        <span class="data-text2">签到</span>
      </div>
      <div class="image-container">
        <img class="icon" src="@/assets/images/rank.png" @click="toRankPage"/>
        <span class="data-text2">排名</span>
      </div>
      <div class="image-container">
        <img class="icon" src="@/assets/images/activity.png" @click="toActivityPage"/>
        <span class="data-text2">创作活动</span>
      </div>
      <div class="image-container">
        <img class="icon" src="@/assets/images/feedback.png" @click="toFeedbackPage"/>
        <span class="data-text2">意见反馈</span>
      </div>
    </div>
  </div>
  <div style="margin-bottom: 54px; text-align: center;">
    <van-button type="primary" style="width: 320px; margin-top: 10px" @click="userLogout">退出登录</van-button>
  </div>
  <van-sticky>
    <van-tabbar route @change="onChange">
      <van-tabbar-item to="/" icon="home-o" name="index">主页</van-tabbar-item>
      <van-tabbar-item to="/blog" icon="notes-o" name="friend">博客</van-tabbar-item>
      <van-tabbar-item to="/message" icon="comment-o" name="message">消息</van-tabbar-item>
      <van-tabbar-item to="/team" icon="flag-o" name="team">队伍</van-tabbar-item>
      <van-tabbar-item to="/user/info" icon="friends-o" name="user">用户</van-tabbar-item>
    </van-tabbar>
  </van-sticky>
</template>


<style scoped>
.user-top {
  width: 90%;
  height: 180px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 12px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
}

.user-profile-top {
  display: flex;
}

.user-profile {
  margin-top: 10px;
  margin-left: 10px;
  background: white;
  width: 216px;
  height: 100px;
}

.user-profile-bottom {
  width: 100%;
  height: 70px;
  display: flex;
  justify-content: space-around;
}

.data {
  font-size: 20px;
}

.data-text {
  font-size: 12px;
  color: darkgrey;
}

.user-middle {
  width: 90%;
  height: 75px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 15px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-around;
}

.icon {
  width: 40px;
  height: 40px;
}

.data-text2 {
  color: #4183F1;
}

.image-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.user-bottom {
  width: 90%;
  height: 225px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 15px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.user-profile-bottom-container {
  width: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>
